import React from 'react';
import { Card, Button, notification, Icon} from 'antd';
const openNotification = () => {
    notification.open({
      message: '月薪15k',
      description:
        '今天的你会感谢昨天努力的自己',
      icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
    });
  };
export default class Notice extends React.Component{
    openNotification = (type,direction)=> {
        if(direction) {
            notification.config({
                placement:direction
            })
        }
        notification[type]({
            message:"发工资了",
            description:"实发工资250"
        })
    }
    render() {
        return (
            <div>
                <Card title="通知提醒框" className="card-wrap">
                    {/* 因为调用函数里面带参数 所以要用箭头函数 点击的时候通过箭头函数传参*/}
                    <Button type='primary' onClick={() => this.openNotification('success')}>Success</Button>
                    <Button type='primary' onClick={() => this.openNotification('info')}>Info</Button>
                    <Button type='primary' onClick={() => this.openNotification('warning')}>Warning</Button>
                    <Button type='primary' onClick={() => this.openNotification('error')}>Error</Button>
                </Card>

                <Card title="通知提醒框" className="card-wrap">
                    {/* 因为调用函数里面带参数 所以要用箭头函数 点击的时候通过箭头函数传参*/}
                    <Button type='primary' onClick={() => this.openNotification('success','topLeft')}>Success</Button>
                    <Button type='primary' onClick={() => this.openNotification('info','topRight')}>Info</Button>
                    <Button type='primary' onClick={() => this.openNotification('warning','bottomLeft')}>Warning</Button>
                    <Button type='primary' onClick={() => this.openNotification('error','bottomRight')}>Error</Button>
                    <Button type="primary" onClick={openNotification}>
                        Open the notification box
                    </Button>,
                </Card>
            </div>
        )
    }
}